<template>
  <el-descriptions class="margin-top" :title="'订单号:' + data._id" :column="3">
    <template slot="extra">
      <el-button v-if="data.status === '否'" type="primary" size="small" @click="send">{{ data.deliveryman ? '去配送' : '去接单' }}</el-button>
      <el-button v-else type="danger" size="small" disabled>已送达</el-button>
    </template>
    <el-descriptions-item label="用户名">{{ data.custom.username }}</el-descriptions-item>
    <el-descriptions-item label="手机号">{{ data.custom.phone }}</el-descriptions-item>
    <el-descriptions-item label="下单时间">{{ data.start }}</el-descriptions-item>
    <el-descriptions-item label="备注">
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="送货地址">{{ data.deliveryAddress }}</el-descriptions-item>
    <el-descriptions-item label="预计送达时间">{{ data.end }}</el-descriptions-item>
  </el-descriptions>
</template>

<script>
import { chosenOrder, received } from '@/api/index.js'
export default {
  props: {
    data: {
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    async send() {
      if (!this.data.deliveryman) {
        const deliveryId = JSON.parse(localStorage.getItem('accessToken')).data
        const { data } = await chosenOrder('/api/home/chosenorder', { id: this.data._id, deliveryId })
        if (data.message !== 'success') {
          return this.open('此单已被接走，请重新刷新查看')
        }
        this.$emit('del')
        this.open('接单成功,请记得及时配送哦')
      } else {
        const { data } = await received('/api/home/comfirmorder', { id: this.data._id })
        if (data === 'ok') {
          this.$emit('confirm')
          this.open('配送成功')
        }
      }
    },
    open(msg) {
      this.$message(`${msg}`)
    }
  }
}
</script>

<style lang="less" scoped>
.margin-top.el-descriptions {
  border-bottom: 1px solid cyan;
  opacity: 1;
  color: #000 !important;
}
/deep/.el-descriptions__body {
  background-color: transparent;
  color: #000;
}

button.el-button.el-button--primary.el-button--small {
  background: linear-gradient(145deg, #5856cb, #6967f2);
  background-clip: text;
  color: transparent;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
}
</style>
